<template>
  <div class="app-container">
    <header class="header">
      <img src="@/assets/logo2.png" alt="Logo" class="header-logo"/>
    </header>

    <div class="center">
      <div class="forgot-password">
        <h2 class="forgot-passwordH2">找回密码</h2>
        <input v-model="username" type="text" placeholder="用户名" class="input-box"/>
        <input v-model="email" type="email" placeholder="邮箱" class="input-box"/>
        <div class="verification-row">
          <input v-model="verificationCode" type="text" placeholder="输入验证码" class="input-box-half"/>
          <button @click="sendVerificationCode" class="inupbutton-half" :disabled="isSending">
            {{ isSending ? `${countdown}s 后重新获取` : '发送验证码' }}
          </button>
        </div>
        <input v-model="newPassword" type="password" placeholder="新密码" class="input-box"/>
        <input v-model="confirmPassword" type="password" placeholder="确认新密码" class="input-box"/>
        <div class="button-row">
          <button @click="verifyAndResetPassword" class="inupbutton">验证并重置密码</button>
          <button @click="goToLogin" class="inupbutton">返回登录</button>
        </div>
        <p v-if="loginMessage" class="login-message">{{ loginMessage }}</p>
      </div>
    </div>

    <footer class="footer">
      <div class="footer-content">
        <p class="footer-text">© 2024 大学报修管理系统</p>
      </div>
    </footer>

    <div v-if="showAlert" :class="`alert alert-${alertTheme}`">
      <div v-if="alertMessage" class="alert-message">
        <slot name="message">{{ alertMessage }}</slot>
      </div>
      <button class="alert-close" @click="showAlert = false">×</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

const username = ref('');
const email = ref('');
const verificationCode = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const loginMessage = ref('');
const codeSent = ref(false);
const showAlert = ref(false);
const alertMessage = ref('');
const alertTheme = ref('');
const countdown = ref(60);
const isSending = ref(false);

const sendVerificationCode = async () => {
  if (!username.value || !email.value) {
    alertTheme.value = 'warning';
    alertMessage.value = '请填写用户名和邮箱';
    showAlert.value = true;
    return;
  }

  try {
    const response = await axios.post('http://localhost:8000/admin-users/forgot-password', {
      username: username.value,
      email: email.value,
    });

    alertTheme.value = response.data.message.includes('验证码已发送') ? 'success' : 'error';
    alertMessage.value = response.data.message;
    showAlert.value = true;

    if (response.data.message.includes('验证码已发送')) {
      codeSent.value = true;
      isSending.value = true;
      startCountdown();
    }
  } catch (error) {
    console.error('发送验证码失败:', error);
    alertTheme.value = 'error';
    alertMessage.value = '发送验证码失败，请重试';
    showAlert.value = true;
  }
};

const startCountdown = () => {
  countdown.value = 60;
  const timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isSending.value = false;
    }
  }, 1000);
};

const verifyAndResetPassword = async () => {
  if (!verificationCode.value) {
    alertTheme.value = 'warning';
    alertMessage.value = '请输入验证码';
    showAlert.value = true;
    return;
  }

  if (!newPassword.value || !confirmPassword.value) {
    alertTheme.value = 'warning';
    alertMessage.value = '请填写新密码和确认密码';
    showAlert.value = true;
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    alertTheme.value = 'warning';
    alertMessage.value = '新密码和确认密码不一致';
    showAlert.value = true;
    return;
  }

  try {
    const response = await axios.post('http://localhost:8000/admin-users/verify-code', {
      username: username.value,
      code: verificationCode.value,
    });

    if (response.data.message.includes('验证成功')) {
      // 进行密码重置
      const resetResponse = await axios.post('http://localhost:8000/admin-users/reset-password', {
        username: username.value,
        newPassword: newPassword.value,
      });

      alertTheme.value = resetResponse.data.message.includes('重置成功') ? 'success' : 'error';
      alertMessage.value = resetResponse.data.message;
      showAlert.value = true;
    } else {
      alertTheme.value = 'error';
      alertMessage.value = response.data.message;
      showAlert.value = true;
    }
  } catch (error) {
    console.error('验证或重置失败:', error);
    alertTheme.value = 'error';
    alertMessage.value = '验证或重置密码失败，请重试';
    showAlert.value = true;
  }
};

const goToLogin = () => {
  router.push('/login');
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免页面出现滚动条 */
  background-color: white; /* 设置页面背景颜色为白色 */
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #013989;
  color: white;
  display: flex;
  align-items: center;
  padding: 30px 60px; /* 调整顶部导航栏的内边距 */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; /* 确保在最上层 */
}

.header-logo {
  height: 80px; /* 调整 Logo 图片的高度 */
  margin-right: 30px; /* 增大 Logo 和标题之间的间距 */
}

.header-title {
  font-size: 32px; /* 增大标题字体 */
  margin: 0;
}

.center {
  flex: 1; /* 占满剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  flex-direction: column;
  margin: 0; /* 将页边距设置为0 */
}

.forgot-password {
  background: linear-gradient(to right, #ffffff, #ffffff); /* 标准语法 */
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 80vw; /* 确保宽度适应视口宽度 */
  max-width: 800px; /* 最大宽度设置为800px */
  height: auto;
  padding: 40px 20px; /* 调整内边距 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.forgot-passwordH2 {
  font-size: 25px;
  color: black;
}

.input-box {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 60%; /* 设置输入框宽度 */
  color: black !important; /* 设置输入文字颜色为黑色 */
  border-radius: 25px; /* 添加圆角 */
}

.input-box-half {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: calc(50% - 10px); /* 设置半宽输入框 */
  color: black !important; /* 设置输入文字颜色为黑色 */
  border-radius: 25px; /* 添加圆角 */
}

.verification-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 在行内两端对齐 */
  width: 60%; /* 设置与其他输入框相同的宽度 */
}

.inupbutton {
  background-color: #62a0f1;
  border: none;
  height: 40px;
  border-radius: 25px; /* 添加圆角 */
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 20px; /* 添加上边距 */
  width: 50%; /* 设置按钮宽度与输入框相同 */
}

.inupbutton-half {
  background-color: #62a0f1;
  border: none;
  height: 40px;
  border-radius: 25px; /* 添加圆角 */
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 20px; /* 添加上边距 */
  width: calc(50% - 10px); /* 设置半宽按钮 */
}

.button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 在行内两端对齐 */
  width: 60%; /* 设置与其他输入框相同的宽度 */
}

.inupbutton:disabled {
  background-color: #a0c4f1;
}

/* 底部导航栏 */
.footer {
  background-color: #013989;
  color: white;
  text-align: center;
  padding: 30px 60px; /* 调整底部导航栏的内边距 */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000; /* 确保在最上层 */
}

.footer-content {
  margin-top: 10px; /* 增大底部内容与底部边缘之间的间距 */
}

.footer-text {
  margin: 0;
}

/* 警告框样式 */
.alert {
  padding: 16px;
  border-radius: 4px;
  position: fixed;
  top: 200px; /* 将弹出框的位置向下移动 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* 确保弹出框在最上层 */
  margin: 10px 0;
  width: auto;
  max-width: 80%;
  text-align: center;
}

.alert-info {
  background-color: #e0f7fa;
  color: #00796b;
}

.alert-success {
  background-color: #e8f5e9;
  color: #388e3c;
}

.alert-warning {
  background-color: #fff3e0;
  color: #f57f17;
}

.alert-error {
  background-color: #ffebee;
  color: #c62828;
}

.alert-message {
  margin-right: 30px;
}

.alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}
</style>
